<template>
  <f7-page class="qm-page">
     <f7-link icon-f7="chevron_left" class="arrow" back></f7-link>
    <f7-block class="qm-block">
      账号
     <qm-field
          v-model="user"
          placeholder="请输入您的账号"
          class="qmfield"
        >
        </qm-field>
        密码
        <qm-field
          v-model="password"
          placeholder="请输入您的密码"
          clearable
          clear-trigger="always"
          :type="textstyle"
          class="qmfield"
        >
          <template #right-icon>
            <img
              src="static/img/land/index7/login_kejian.svg"
              alt=""
              width="20px"
              height="10px"
              @click="changepassword"
              v-if="showpassword"
            />
            <img
              src="static/img/land/index7/login_nokejian.svg"
              alt=""
              width="20px"
              height="10px"
              @click="changepassword"
              v-else
            />

          </template>
        </qm-field>
        <f7-button raised fill round class="qm-button">立即登录</f7-button>
        <div class="footer">广州市齐明软件科技有限公司提供技术支持</div>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
    data() {
    return {
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
    textstyle() {
      if (this.showpassword) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  methods: {
    changepassword() {
      this.showpassword = !this.showpassword;
    },
  },
};
</script>

<style lang="less" scoped>
.arrow{
  position: fixed;
  color: var(--color-fill-grey-inverse);
  margin-top: 10px;
  left: 6%;
  }
.qm-page{
 background: url("../../../../static/img/land/index7/login_bg.png");
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 100% calc(565px * var(--ratio));
  background-attachment: fixed;
  width: 100%;
  background-color: var(--color-fill-grey-inverse);
  .qm-block{
    padding-top:calc(565px * var(--ratio)) ;
    --f7-block-padding-horizontal:calc(64px * var(--ratio));
    color: #61677A;
    .qmfield{
      margin-bottom: 15px;
    }
    /deep/ .van-cell{
      padding: 12px 0px 10px;
    }
    /deep/ .van-field__clear{
      margin-right: 20px;
    }
    /deep/.van-cell::after{
      left: 3px;
      right: 0px;
    border-bottom: 3px solid #ebedf0;
    }
    .qm-button {
      margin: 40px 0px 0px;
      height: calc(62px * var(--ratio));
      background-color: var(--color-brand);
      color: var(--color-fill-grey-inverse);
      font-size: var(--font-size-maintitle);
      --f7-button-raised-box-shadow: auto;
      box-shadow: 0px 3px 7px 0px rgba(51, 133, 255, 0.3);
    }
        .footer {
      position: absolute;
      text-align: center;
      color: #959cb2;
      margin-top: 220px;
      font-size: 12px;
      left: 0px;
      right: 0px;
    }
  }
  /deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #ffff inset !important;}
}
</style>
